  /* 
    分析:
    1 需要给搜索按钮绑定一个tap点击事件
    2 事件触发
      a 获取搜索框值txt 做个判断 
        如果 非法 return
        合法-的值
    3 把txt存到本地存储中
      a 获取本地存储的数据(数组字符串)判断有没有数据 有就获取 没有return->[]
      b 把数据(数组)渲染到ul标签里面 为了做删除单个的需要   把索引添加到了a标签上

    4 删除所有
      a 清空 本地存储 removeItem(key)
      b 重新渲染页面
    5 删除单个
      a 先获取 对应的索引
      b 再去做删除 arr.splice(索引,删除几个)
      
     把txt当作参数 跳转到另外的页面

     */
      $(function() {
        //点击搜索，存数据，如果相同则先删除那个相同的，再存，
        $(".sou").on("tap",function () {
          //获取值
          var val=$(".neirong").val();
          if(!$.trim(val)){
            return;
          }
          // 读取数组
          var arr = (localStorage.getItem("key") && JSON.parse(localStorage.getItem("key"))) || [];
          for (var i = 0; i < arr.length; i++) {
            var element = arr[i];
            if(element == val){
              arr.splice(i,1);
            }
          }
          arr.unshift(val);
          //存数据
          localStorage.setItem("key",JSON.stringify(arr));
          location.href = "./searchList.html?key=" + val;
          })

          // 页面刷新，显示搜索历史
          ist();
          function ist() {
            //获取arr数据；
            var arr = (localStorage.getItem("key") && JSON.parse(localStorage.getItem("key"))) || [];
            if(arr.length>0){
              $(".no").hide();
            }else{
              $(".clear").hide();
            }
            var li="";
            for (var i = 0; i < arr.length; i++) {
              var element = arr[i];
            li += '<li>'+ element +'<a data-index=' + i +' class="removeItem mui-pull-right" href="javascript:;"><span class="mui-icon mui-icon-closeempty"></span></a></li>';
            }
            $(".content_ul").html(li);
          }

          //点击清空记录，把数据删除；
          $(".clearAll").on("tap",function () {
            localStorage.removeItem("key");
          })


          //点击单个删除
          $(".content_ul").on("tap",".removeItem",function (e) {
            //这里的target默认选的是span，所以要加个parent来选中带索引的a；
            //data方法可以选中带data-开头的有语义化的自定义的属性值，或者给它添加属性和值都可以；
            var index=$(e.target).parent().data("index");
            var arr = (localStorage.getItem("key") && JSON.parse(localStorage.getItem("key"))) || [];
            arr.splice(index,1);
            //重新渲染页面
            var li = "";
            for (var i = 0; i < arr.length; i++) {
              var element = arr[i];
              li += '<li>' + element + '<a data-index=' + i + ' class="removeItem mui-pull-right" href="javascript:;"><span class="mui-icon mui-icon-closeempty"></span></a></li>';
            }
            $(".content_ul").html(li);
            localStorage.setItem("key", JSON.stringify(arr));

            })

      });





// $(function() {
//     $(".sou").on('tap', function() {//给搜索添加事件，如果是空，就返回return，如果有就跳转，同时也把它添加到
//       //历史里
//       var val = $(".neirong").val();
//       // 判断txt是否合法
//       //  trim 去掉值的左右两边的空格
//       if (!$.trim(val)){
//         return;
//       }
//       //把值存起来,因为传输的时候只能是json字符串； &&找假，如果前面的值有，则返回转换后的；如果括号里的没有值，
//       //说明是空的，|| 则返回空数组；
//       var arr =(localStorage.getItem("key") && JSON.parse(localStorage.getItem("key"))) || [];
//      //现在把值存起来，如果有重复的话，先删掉，再重新存新输入的这个值
//      for (var i = 0; i < arr.length; i++) {
//        var element = arr[i];
//        if(element==val){
//          arr.splice(i,1);
//        }
//      }

//      //再添加到数组里面去
//      arr.unshift(val);
//      localStorage.setItem("key",JSON.stringify(arr));

//      //点击会跳转页面
//      location.href ="./searchList.html?key="+val;
//     })

//     //页面一过来，如果有历史就把历史显示在ul里面
//     int();
//     function int() {
//       var arr = (localStorage.getItem("key") && JSON.parse(localStorage.getItem("key"))) || [];
//       var li ="";
//       for (var i = 0; i < arr.length; i++) {
//         var element = arr[i];
//         //注意拼接字符串
//         li += '<li>'+ element +'<a data-index=' + i +' class="removeItem mui-pull-right" href="javascript:;"><span class="mui-icon mui-icon-closeempty"></span></a></li>';
//       }
//       $(".content_ul").html(li);
//       //如果arr有数据，则没有搜索历史就要隐藏了
//       if(arr.length>0){
//         $(".no").hide();
//       }else{
//         $(".clear").hide();
//       }
//     };

//     //点击清空历史，清除数组； 这里的清除一个键和清除全部一样的效果，因为一个key对应了很多值；
//     $(".clearAll").on("tap",function () {
//         localStorage.removeItem("key");
//     });

//     //删除单个,这里的事件对象会是a标签下面的span，所以要处理一下；
//     $(".content_ul").on("tap",".removeItem",function (e) { 
//         var target=e.target;
//         var index=$(target).parent().data("index");
//         var arr = (localStorage.getItem("key") && JSON.parse(localStorage.getItem("key"))) || [];
//         arr.splice(index,1);
//         var li="";
//         for (var i = 0; i < arr.length; i++) {
//           var element = arr[i];
//           //注意拼接字符串
//           li += '<li>' + element + '<a data-index=' + i + ' class="removeItem mui-pull-right" href="javascript:;"><span class="mui-icon mui-icon-closeempty"></span></a></li>';
//         }
//         $(".content_ul").html(li);

//         //把新数组重新加入到localStorage里面去；
//         localStorage.setItem("key", JSON.stringify(arr));
//      })
// })